<template>
	<view class="page" @click="showModeDropdown=false">
		<!-- 导航栏 -->
		<view class="navbar">
			<view class="navbar-content">
				<view class="back-button" @click="goBack">
					<uni-icons type="back" size="30" color="#ffff"></uni-icons>
				</view>
				<text class="navbar-title">维修订单</text>
			</view>
		</view>
		
		<view class="top-bar">
			<view class="tabs">
				<view :class="['tab', activeTab === 'doing' ? 'active' : '']" @click.stop="setTab('doing')">进行中</view>
				<view :class="['tab', activeTab === 'done' ? 'active' : '']" @click.stop="setTab('done')">已完成</view>
			</view>
		</view>
<view style="width: 100%;position: absolute;top: 223rpx;">

	<view class="filters filter-card">
		<view class="filters-left">
			<text class="label">维修方式：</text>
			<view class="dropdown" @click.stop="toggleModeDropdown">
				<view class="dropdown-trigger primary">
					<text>{{ modes[modeIndex] }}</text>
					<uni-icons type="bottom" size="14" color="#ffffff"></uni-icons>
				</view>
				<view v-if="showModeDropdown" class="dropdown-menu">
					<view v-for="(m, mi) in modes" :key="mi" class="dropdown-item" @click.stop="selectMode(mi)">{{ m }}</view>
				</view>
			</view>
		</view>
		<view class="filters-right">
			<view class="date-input" @click.stop="toggleDatePopup">
				<image class="date-icon" src="/static/日期.png" mode="widthFix"></image>
				<text class="date-label">预约日期</text>
			</view>
			<!-- 弹出层 -->
			<view v-if="showDatePopup" class="date-popup-mask" @click="toggleDatePopup">
				<view class="date-popup" @click.stop>
					<view class="date-row">
						<text class="date-label-text">开始时间</text>
						<view class="date-value">
							<uni-datetime-picker type="datetime" v-model="startDateTime" @change="onStartDateTimeChange" />
						</view>
					</view>
					<view class="date-row">
						<text class="date-label-text">结束时间</text>
						<view class="date-value">
							<uni-datetime-picker type="datetime" v-model="endDateTime" @change="onEndDateTimeChange" />
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	<view class="list">
		<view v-for="(item, index) in filteredList" :key="index" class="cell" @click.stop="goDetail(item)">
			<view class="row"><text class="name">维修单号：</text><text class="value">{{ item.no }}</text></view>
			<view class="row"><text class="name">维修方式：</text><text class="value">{{ item.mode }}</text></view>
			<view class="row"><text class="name">预约日期：</text><text class="value">{{ item.date }}</text></view>
		</view>

</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activeTab: 'doing',
				modes: ['全部', '到店维修', '上门取车'],
				modeIndex: 0,
				showModeDropdown: false,
				showDatePopup: false,
				selectedDate: '',
				startDateTime: '',
				endDateTime: '',
				single: '',
				datetimesingle: '',
				range: ['2021-02-1', '2021-3-28'],
				datetimerange: [],
				start: Date.now() - 1000000000,
				end: Date.now() + 1000000000,
				list: [
					{ no: '3535252', mode: '到店维修', date: '2022/11/10 11:00', status: 'doing' },
					{ no: '3535252', mode: '上门取车', date: '2022/11/10 11:00', status: 'doing' },
					{ no: '3535252', mode: '到店维修', date: '2022/11/10 11:00', status: 'doing' },
					{ no: '6644123', mode: '到店维修', date: '2022/11/01 10:00', status: 'done' }
				]
			}
		},
		computed: {
			filteredList() {
				const mode = this.modes[this.modeIndex]
				const day = this.selectedDate ? String(this.selectedDate).split(' ')[0].replace(/-/g, '/') : ''
				return this.list.filter(item => {
					if (this.activeTab !== item.status) return false
					if (mode !== '全部' && item.mode !== mode) return false
					if (day && !item.date.startsWith(day)) return false
					return true
				})
			}
		},
		watch: {
			datetimesingle(newval) {
				console.log('单选:', this.datetimesingle);
			},
			range(newval) {
				console.log('范围选:', this.range);
			},
			datetimerange(newval) {
				console.log('范围选:', this.datetimerange);
			}
		},
		mounted() {
			setTimeout(() => {
				this.datetimesingle = Date.now() - 2*24*3600*1000
				this.single = '2021-2-12'
				this.datetimerange = ["2021-07-08 0:01:10", "2021-08-08 23:59:59"]
				// 初始化日期时间
				this.startDateTime = Date.now() - 2*24*3600*1000
				this.endDateTime = Date.now() + 10*24*3600*1000
			},3000)
		},
		methods: {
			goBack() {
				uni.navigateBack();
			},
			setTab(type) {
				this.activeTab = type
			},
			toggleModeDropdown() {
				this.showModeDropdown = !this.showModeDropdown
			},
			selectMode(index) {
				this.modeIndex = index
				this.showModeDropdown = false
			},
			toggleDatePopup() {
				this.showDatePopup = !this.showDatePopup
			},
			onStartDateTimeChange(e) {
				this.startDateTime = e
				console.log('开始时间选择:', e);
			},
			onEndDateTimeChange(e) {
				this.endDateTime = e
				console.log('结束时间选择:', e);
			},
			change(e) {
				this.single = e
				console.log('change事件:', this.single = e);
			},
			changeLog(e) {
				console.log('change事件:', e);
			},
			maskClick(e){
				console.log('maskClick事件:', e);
			},
			goDetail(item){
				const query = `no=${encodeURIComponent(item.no)}&mode=${encodeURIComponent(item.mode)}&date=${encodeURIComponent(item.date)}`
				uni.navigateTo({ url: `/my-item/Repair/detail?${query}` })
			}
		}
	}
</script>

<style>
	.page {
		background-color: #f5f6fa;
		min-height: 100vh;
		position: relative;
	}

	/* 导航栏 */
	.navbar {
		width: 100%;
		height: 88rpx;
		background: linear-gradient(120deg, #1f78ff 0%, #2f89ff 100%);
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.navbar-content {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		position: relative;
		padding: 0 24rpx;
	}

	.back-button {
		position: absolute;
		left: 24rpx;
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.navbar-title {
		color: #ffffff;
		font-size: 32rpx;
		font-weight: 600;
		text-align: center;
		width: 100%;
	}

	.top-bar {
		background: linear-gradient(120deg, #1f78ff 0%, #2f89ff 100%);
		padding: 16rpx 24rpx 220rpx 24rpx;
		position: relative;
	}

	.tabs { 
		display: flex; 
		flex-direction: row; 
		justify-content: center; 
		}
	.tab {
		padding: 16rpx 28rpx 12rpx 28rpx;
		color: #cfe2ff;
		margin: 0 36rpx;
		font-size: 32rpx;
		/* font-weight: 600; */
	}
	.tab.active { color: #ffffff; border-bottom: 8rpx solid #ffffff; border-radius: 4rpx; }

	.filters {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 0 24rpx;
		margin-top: -60rpx;

	}
	.filter-card { 
		background: #ffffff;
		border-radius:16rpx; 
		padding: 20rpx; 
		width: 90%;
		margin: 0 auto;
		box-shadow: 0 8rpx 24rpx rgba(0,0,0,0.06); 
	}
	.filters-left { display: flex; flex-direction: row; align-items: center; }
	.filters-right { display: flex; flex-direction: row; align-items: center; }
	.label { color: #333; font-size: 26rpx; }
	.dropdown { position: relative; margin-left: 8rpx; }
	.dropdown-trigger { 
		display: flex; 
		flex-direction: row; 
		align-items: center; 
		border: 1rpx solid #e5e5e5; 
		padding: 4rpx 16rpx; 
		border-radius: 12rpx; 
		}
	.dropdown-trigger.primary { background: #2f89ff; border-color: #2f89ff; }
	.dropdown-trigger.primary text { color: #ffffff; }
	.dropdown-trigger text { font-size: 26rpx; color: #333; margin-right: 8rpx; }
	.dropdown-menu { position: absolute; top: 64rpx; left: 0; width: 300rpx; background: #fff; border: 1rpx solid #e5e5e5; box-shadow: 0 8rpx 16rpx rgba(0,0,0,0.06); border-radius: 8rpx; z-index: 10; }
	.dropdown-item { padding: 16rpx; font-size: 26rpx; color: #333; }
	.dropdown-item + .dropdown-item { border-top: 1rpx solid #f0f0f0; }
	.dropdown-item:active { background: #f7f8fa; }

	.date-input { 
		position: relative; 
		display: flex; 
		align-items: center; 
		background: #ffffff; 
		border-radius: 12rpx; 
		padding: 8rpx 12rpx; 
		}
	.date-icon { width: 28rpx; height: 28rpx; }
	.date-label { color: #333; font-size: 26rpx; margin-left: 8rpx; }
	
	/* 遮罩层样式 */
	.date-popup-mask {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		z-index: 20;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	/* 弹出层样式 */
	.date-popup {
		background: #ffffff;
		border-radius: 16rpx;
		padding: 32rpx;
		box-shadow: 0 8rpx 24rpx rgba(0,0,0,0.1);
		width: 500rpx;
		max-width: 90vw;
	}
	
	.date-row {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 16rpx;
	}
	
	.date-label-text {
		color: #333;
		font-size: 26rpx;
	}
	
	.date-value {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 8rpx;
	}
	
	
	.example-body {
		background-color: #fff;
		padding: 10px;
	}
	


	.list { padding: 24rpx 24rpx 40rpx 24rpx; }
	.cell { background: #ffffff; border-radius: 16rpx; padding: 28rpx; box-shadow: 0 8rpx 24rpx rgba(0,0,0,0.06); margin-bottom: 24rpx; }
	.row { display: flex; flex-direction: row; align-items: center; margin: 8rpx 0; }
	.name { width: 180rpx; color: black; font-size: 28rpx; }
	.value { color: #747373; font-size: 28rpx; }
</style>
